<template>
	<!-- 附近团购 -->
	<view class="Aroundmain">
		<view class="address">
			<text class="taddress">{{address}}</text>
			<image style="width: 60rpx;height: 60rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/local.png" mode=""></image>
		</view>

		<view class="shop" v-for="item in allList" :key="item.id">
			<view class="shopimg" @click="tdetails(item.id)">
				<image :src="item.images" mode=""></image>
			</view>
			<view class="shopword">
				<!-- <text class="shoptitle">{{item.commodityName}}</text> -->
				<view >
					<text class="shopname">{{item.commodityName}}</text>
				</view>
				<view class="shopint">
					<text style="font-size: 24rpx;color: #000000;margin-left: 20rpx;">{{item.explains}}</text>
				</view>
				<view class="partake">
					<text>{{item.distribution==0?'分销':'不分销'}}</text>
				</view>
				<view class="monthgod">
					<!-- <text>月售{{item.salesVolume}}</text> -->
					<!-- <text style="margin-left: 20rpx;">{{item.good}}</text> -->
				</view>
				<view class="shopmoney">
					<text style="font-size: 20rpx;color: #000000;">￥</text>
					<text style="color: #FF6633;font-size: 34rpx;">{{item.currentPrice}}</text>
					<text style="color: #999999;font-size: 20rpx;font-weight:bold;text-decoration: line-through;margin-left: 20rpx;">{{item.originalPrice}}</text>
					<!-- <view class="Qshare">
						<text>一键分享</text>
					</view> -->
					<view class="Qbuy" @click="tdetails(item.id)">
						<text>抢购</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/common/request.js';
	export default {
		data() {
			return {
				allList: [],
				address:uni.getStorageSync('address'),
				curntpage: 1, //加载页数
				allPage: '', //数据总页数
			}
		},
	onLoad(){
		this.getAllList()
	},
	
	onPullDownRefresh() {
		// 刷新初始化数据
		this.size = 10
		this.current = 1
		// 调用获取数据的函数
		this.getAllList()
		// 关闭刷新动画
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},1000)
	},
	
	// 上拉加载
	onReachBottom() {
		console.log('触底')
		console.log(this.curntpage)
		console.log(this.allPage)
		if (this.curntpage == this.allPage) {
			console.log('当前访问页面已经到最后一页')
			uni.showToast({
				title: '当前访问页面已经到最后一页',
				icon: "none",
			})
	
		} else {
			this.curntpage++
			setTimeout(() => {
				// 调用请求数据的方法
				this.getAllList()
			}, 300)
		}
	},
	
	methods:{
		getAllList(){
			const requestAll = {
				url: `/api/commodity/around/list`,
				method: "POST",
				data: {
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude'),
					current:1,
					size:10,
					sort:0,
					distance:500000000,
					distribution : "分销"
				},
				callBack: (res) =>{
					if (res.code == 200) {
						this.text = 'request success';
						this.allList = res.data.records
					}
					
				}
			}
			this.$http.request(requestAll)
		},
		
		tdetails(e){
			uni.navigateTo({
				url: './Hotdetails?sid=' + e
			})
		}
	}
	}
</script>

<style>
	.taddress{
		color: #000000;
		font-size: 28rpx;
		line-height: 120rpx;
		margin-left: 20rpx;
		display: inline-block;
		width: 550rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.Aroundmain {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.Aroundmain .address {
		width: 100%;
		height: 120rpx;
		/* border-bottom: 4rpx solid #F1F1F1; */
		position: relative;
	}

	.address image {
		position: absolute;
		top: 26rpx;
		left: 646rpx;
	}

	.shop {
		height: 200rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.shopimg image {
		width: 200rpx;
		height: 200rpx;
	}
     
	.shoptitle{
		 font-size: 28rpx;
		 color: #333333;
		 font-weight: bold;
		 margin-left: 20rpx;
	 }

	.shopname {
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.monthgod {
		margin-left: 18rpx;
		font-size: 20rpx;
		color: #000000;
		margin-top: 8rpx;
	}

	.shopmoney {
		margin-top: 6rpx;
		margin-left: 20rpx;
	}
	.Qshare{
		width: 116rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		position: absolute;
		bottom: 75rpx;
		right: 20rpx;
	}

	.shopmoney .Qbuy {
		width: 86rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;
	}
	.partake {
		width: 100rpx;
		height: 28rpx;
		border-radius: 20rpx;
		border: 2rpx solid #FFC300;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
		color: #FCC100;
		line-height: 32rpx;
		text-align: center;
	}
</style>
